<template>
  <div class="body_all">
    <div class="cantent">
      <span>基础设置：</span>
      <el-form
        v-loading="loading"
        class="form personal"
        label-width="150px"
      >
        <div v-for="(item,index) in allItem" :key="index">
          <el-form-item :label="item.desp">
            <!-- 单行输入框 -->
            <el-input v-if="item.type === 'input'" v-model="item.value"></el-input>
            <!-- 多行输入框 -->
            <el-input v-else-if="item.type === 'text'" type="textarea" :autosize="{ minRows: 2}" v-model="item.value"></el-input>
            <!-- 图片上传 -->
            <div v-else-if="item.type === 'img'">
              <div class="commodityImgCss">
                <div v-show="item.value !== ''" class="imageUl">
                  <div style="position: relative">
                    <el-image :src="item.value" 
                    :preview-src-list="
                    showImg(item.value)" class="avatar" /></el-image>
                    <i
                      class="el-icon-error el-img-error"
                      @click="delLogo(index)"
                    ></i>
                  </div>
                </div>
                <el-upload
                  style="overflow: hidden"
                  class="avatar-uploader"
                  :show-file-list= "false"
                  action
                  :http-request="(file)=>{return LogoSuccess(file ,index)}"
                >
                  <i
                    v-if="item.value === ''"
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                </el-upload>
                </div>
                <div v-if="item.desp==='ICON'" class="a_span">
                  要求：尺寸为392*71，不大于300KB、PNG、JPG格式件图片
                </div>
            </div>
            <!-- 富文本 -->
            <div v-else-if="item.type === 'rich'">
              <wangeditor
                v-if="editorStart"
                class="editor"
                :ref="item.item"
                :name="item.item"
                :textData="item.value"
              ></wangeditor>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="footer_btn">
      <el-button type="primary" @click="onSubmit">立即提交</el-button>
      <el-button v-if="false">取消</el-button>
    </div>
  </div>
</template>

<script>
import wangeditor from "../../components/wangeditor";
export default {
  components: {
    wangeditor,
  },
  data() {
    return {
      allItem: [],
      editorStart: false,
      loading: false,
      tableData: [],
    };
  },
  created() {
    this.loading = true;
    this.getDate();
  },
  methods: {
    // 数据获取
    getDate() {
      let that = this;
      this.$cmsapi
        .BasicSettingsList()
        .then((res) => {
          if (res.code === 1 && res.msg === "登录已过期,请重新登录") {
            // 如果身份过期需要退出重新登陆
            var storage = window.localStorage;
            storage.clear();
            setTimeout(() => {
              this.$store.commit("logout", "false");
              this.$router.push({ path: "/login" });
            }, 1000);
            return;
          }
          this.allItem = res.data;
          this.tableData = JSON.parse(JSON.stringify(res.data));
          this.editorStart = true;
          this.loading = false;
        })
        .catch((erro) => {
          console.log(erro);
        });
    },
    // 大图预览
    showImg(img) {
      let imgArr = [];
      imgArr.push(img);
      return imgArr;
    },
    LogoSuccess(param, index) {
      this.$cmsapi
        .FileUpload(param.file)
        .then((res) => {
          this.allItem[index].value = res.data.url;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    delLogo(index) {
      this.allItem[index].value = "";
    },
    // 表单提交
    onSubmit() {
      this.loading = true;
      for (let i = 0; i < this.allItem.length; i++) {
        // 获取富文本数据
        if (this.allItem[i].type === "rich") {
          debugger
          this.allItem[i].value = this.$refs[this.allItem[i].item][0].submit();
        }
        if (this.allItem[i].item === "site") {
          // 网站标题
        } else if (this.allItem[i].item === "logo") {
          // 网站logo
          this.allItem[i].value = this.allItem[i].value.replace(
            this.domain,
            ""
          );
        } else if (this.allItem[i].item === "icon") {
          // 网站icon
          this.allItem[i].value = this.allItem[i].value.replace(
            this.domain,
            ""
          );
        }
        for (let j = 0; j < this.tableData.length; j++) {
          if (
            this.allItem[i].item === this.tableData[j].item &&
            this.allItem[i].value !== this.tableData[j].value
          ) {
            let param = {
              item: this.allItem[i].item,
              value: this.allItem[i].value,
            };
            this.$cmsapi
              .BasicSettingsSave(param)
              .then((res) => {})
              .catch((erro) => {
                console.log(erro);
              });
          }
        }
      }
      this.$message({
        type: "success",
        message: "提交成功！",
      });
      setTimeout(() => {
        location.reload();
      }, 1000);
      this.getDate();
    },
  },
};
</script>
<style scoped>
span {
  font-weight: bolder;
}
.form {
  margin: 20px;
}
.footer_btn {
  text-align: center;
}
.personal /deep/ .el-input-group__append {
  border-left: 0;
  background-color: #409eff;
  color: #ffff;
}
.personal .el-input-group {
  min-width: 260px;
  width: 25%;
}
</style>